<template>
  <z-form-item
    :label-col="{ style: { width: '100px', paddingRight: '6px' } }"
    :label="basicForm?.headText || '时间框'"
    class="z-form-item"
    :name="basicForm.field"
  >
    <z-time-picker
      v-if="basicForm.timeSearchType == '1'"
      v-model:value="model[basicForm.field]"
      :placeholder="basicForm?.placeHolder"
      value-format="HH:mm:ss"
      format="HH:mm:ss"
    />
    <z-time-range-picker
      v-else
      v-model:value="model[basicForm.field]"
      value-format="HH:mm:ss"
      format="HH:mm:ss"
    />
  </z-form-item>
</template>
<script>
import { defineComponent, toRef } from 'vue'

export default defineComponent({
  name: 'TimeItem',
  props: {
    basicProperty: {
      type: Object,
      default: undefined
    },
    formModel: {
      type: Object,
      default: undefined
    }
  },
  setup(props) {
    const basicForm = toRef(props, 'basicProperty')
    const model = toRef(props, 'formModel')

    return {
      basicForm,
      model
    }
  }
})
</script>
<style lang="less">
.ant-picker-dropdown {
  .ant-btn {
    height: 100%;
  }
}
.z-form-item {
  flex: 1;
}
</style>
